<template>
  <div class="q-pa-md q-gutter-md">
    <div>
      <t-chips icon="event">Add to calendar</t-chips>
      <t-chips icon="bookmark">Bookmark</t-chips>
      <t-chips icon="alarm" label="Set alarm" />
      <t-chips class="glossy" icon="directions">Get directions</t-chips>
    </div>
    <div>
      <t-chips color="primary" text-color="white" icon="event">
        Add to calendar
      </t-chips>
      <t-chips color="teal" text-color="white" icon="bookmark">
        Bookmark
      </t-chips>
      <t-chips
        class="glossy"
        color="orange"
        text-color="white"
        icon-right="star"
      >
        Star
      </t-chips>
      <t-chips color="red" text-color="white" icon="alarm" label="Set alarm" />
      <t-chips color="deep-orange" text-color="white" icon="directions">
        Get directions
      </t-chips>
      <t-chips>
        <t-avatar icon="bookmark" color="red" text-color="white" />
        Bookmark
      </t-chips>
      <t-chips>
        <t-avatar color="red" text-color="white">50</t-avatar>
        Emails
      </t-chips>
      <t-chips>
        <t-avatar>
          <img src="https://cdn.quasar.dev/img/avatar5.jpg" />
        </t-avatar>
        John
      </t-chips>
    </div>
  </div>
</template>
